<div class="border">
  <div class="header">
    <span>接收设备信息</span>
  </div>
  <div class="list">
    <!--    <md-slide-toggle
          class="example-margin"
          [color]="primary"
          [checked]="checked">
        自动上报
      </md-slide-toggle>-->

    <div class="reports">
      <button class="report" md-raised-button color="primary" (click)=add()>添加</button>
      <button class="report" md-raised-button color="primary" (click)=reportAll()>上报</button>
      <button class="report" md-raised-button color="primary" (click)=reportStatus()>上报状态</button>
      <button class="report" md-raised-button color="primary" (click)=refresh()>刷新</button>
    </div>


    <div class="netSoundSource-container">
      <md-table #table [dataSource]="dataSource">
        <!-- Delete Flag Column -->
        <ng-container cdkColumnDef="deleteFlag">

          <md-header-cell *cdkHeaderCellDef style="flex-grow: 0.2;">
            <md-checkbox (change)="allSelected($event)"></md-checkbox>
          </md-header-cell>


          <md-cell *cdkCellDef="let row" style="flex-grow: 0.2;">
            <md-checkbox [(ngModel)]="row.isChecked"></md-checkbox>
          </md-cell>

        </ng-container>

        <ng-container cdkColumnDef="EBRID">
          <md-header-cell *cdkHeaderCellDef>编号</md-header-cell>
          <md-cell *cdkCellDef="let row">

            <!-- <md-select *ngIf="row.isEdit" placeholder="选择设备类型" [(ngModel)]="row.EBRID">
              <md-option *ngFor="let dev of DEVNUMS" [value]="dev.id">
                {{ dev.value }}
              </md-option>
            </md-select> -->
            <span *ngIf="!row.isEdit" mdTooltip="{{row.EBRID}}">{{"..."+ row.EBRID.slice(-8)}}</span>
            <span *ngIf="row.isEdit" class="linename">
              <input class="mat-input-element" type="text" [(ngModel)]="row.EBRID">
            </span>

          </md-cell>

        </ng-container>

        <!-- Progress Column -->
        <ng-container cdkColumnDef="EBRName">
          <md-header-cell *cdkHeaderCellDef>设备名称</md-header-cell>
          <md-cell *cdkCellDef="let row">

            <span *ngIf="!row.isEdit">{{row.EBRName}}</span>
            <span *ngIf="row.isEdit" class="linename">
              <input class="mat-input-element" type="text" [(ngModel)]="row.EBRName">
            </span>

          </md-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container cdkColumnDef="URL">
          <md-header-cell *cdkHeaderCellDef>地址</md-header-cell>
          <md-cell *cdkCellDef="let row">
            <span *ngIf="!row.isEdit">{{row.URL}}</span>
            <span *ngIf="row.isEdit" class="linename">
              <input class="mat-input-element" type="text" [(ngModel)]="row.URL">
            </span>

          </md-cell>
        </ng-container>




        <!-- Name Column -->
        <ng-container cdkColumnDef="Longitude">
          <md-header-cell *cdkHeaderCellDef>经度</md-header-cell>
          <md-cell *cdkCellDef="let row">

            <span *ngIf="!row.isEdit">{{row.Longitude}}</span>
            <span *ngIf="row.isEdit" class="linename">
              <input class="mat-input-element" type="text" [(ngModel)]="row.Longitude">
            </span>

          </md-cell>
        </ng-container>

        <!-- Color Column -->
        <ng-container cdkColumnDef="Latitude">
          <md-header-cell *cdkHeaderCellDef>纬度</md-header-cell>
          <md-cell *cdkCellDef="let row">
            <span *ngIf="!row.isEdit">{{row.Latitude}}</span>
            <span *ngIf="row.isEdit" class="linename">
              <input class="mat-input-element" type="text" [(ngModel)]="row.Latitude">
            </span>

          </md-cell>
        </ng-container>

        <ng-container cdkColumnDef="StateDesc">
          <md-header-cell *cdkHeaderCellDef>状态</md-header-cell>
          <md-cell *cdkCellDef="let row">
            <!-- <md-select [(ngModel)]='row.StateCode'>
              <md-option [value]="1">
                开机/运行正常
              </md-option>
              <md-option [value]="2">
                关机/停止运行
              </md-option>
            </md-select> -->
            <span >{{row.StateDesc}}</span>
            <!-- <span  *ngIf="row.isEdit" class="linename"><input class="mat-input-element" type="text"[(ngModel)]="row.Latitude" ></span> -->

          </md-cell>
        </ng-container>

        <ng-container cdkColumnDef="operation">
          <md-header-cell *cdkHeaderCellDef>操作</md-header-cell>

          <md-cell *cdkCellDef="let row">

            <button md-mini-fab style="width:25px;height:25px;" *ngIf="!row.isEdit" (click)="edit(row)">
              <md-icon style="color: #fff;font-size: 18px; padding: 0px;">edit</md-icon>
            </button>
            <button md-mini-fab style="width:25px;height:25px;" *ngIf="row.isEdit" (click)="row.isEdit = false; refresh()">
                <md-icon style="color: #fff;font-size: 18px; padding: 0px;">cancle</md-icon>
              </button>
            <button md-mini-fab style="width:25px;height:25px;" *ngIf="row.isEdit" (click)="finish(row)">
              <md-icon style="color: #fff;font-size: 18px; padding: 0px;">check</md-icon>
            </button>
            <button md-mini-fab style="width:25px;height:25px;" *ngIf="!row.isEdit" (click)="delete(row)">
              <md-icon style="color: #fff;font-size: 18px; padding: 0px;">delete</md-icon>
            </button>

          </md-cell>
        </ng-container>





        <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
        <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
      </md-table>
      <md-paginator #paginator [length]="soundSourceDatabase.data.length" [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 15, 20]">
      </md-paginator>
    </div>

  </div>
</div>
